<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<% String path = request.getContextPath(); 
   String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<jsp:useBean id="user" class="com.hebxy.ssm.entity.User" scope="request"></jsp:useBean>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户信息修改</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --input-focus: #667eea;
        }
        body {
            background-color: #f8fafc;
            font-family: 'Segoe UI', system-ui, sans-serif;
        }
        .form-container {
            max-width: 700px;
            margin: 2rem auto;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            border-radius: 12px;
            overflow: hidden;
        }
        .form-header {
            background: var(--primary-gradient);
            color: white;
            padding: 1.5rem;
            text-align: center;
        }
        .form-body {
            padding: 2rem;
            background: white;
        }
        .form-label {
            font-weight: 600;
            color: #4a5568;
            margin-bottom: 0.5rem;
        }
        .form-control, .form-select {
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 0.75rem 1rem;
            transition: all 0.2s;
        }
        .form-control:focus, .form-select:focus {
            border-color: var(--input-focus);
            box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.25);
        }
        .input-group-text {
            background-color: #f7fafc;
        }
        .btn-primary {
            background: var(--primary-gradient);
            border: none;
            padding: 0.75rem 1.5rem;
            font-weight: 600;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        }
        .error-message {
            font-size: 0.875rem;
            color: #e53e3e;
            margin-top: 0.25rem;
        }
        .password-toggle {
            cursor: pointer;
            transition: all 0.2s;
        }
        .password-toggle:hover {
            color: var(--input-focus);
        }
    </style>
</head>
<body>
<div class="container py-5">
    <div class="form-container">
        <div class="form-header">
            <h3><i class="fas fa-user-edit me-2"></i>用户信息修改</h3>
        </div>
        <div class="form-body">
            <form:form action="${pageContext.request.contextPath }/admin/updateUser" method="POST" modelAttribute="user">
                <input type="hidden" name="id" value="${user.id }">
                
                <div class="mb-4">
                    <label class="form-label">卡号</label>
                    <form:input path="card_number" class="form-control"/>
                    <form:errors path="card_number" class="error-message d-block"/>
                </div>
                
                <div class="mb-4">
                    <label class="form-label">用户名</label>
                    <input name="username" value="${user.username }" class="form-control">
                </div>
                
                <div class="mb-4">
                    <label class="form-label">密码</label>
                    <div class="input-group">
                        <input name="password" value="${user.password }" type="password" class="form-control" id="passwordInput">
                        <span class="input-group-text password-toggle" onclick="togglePassword()">
                            <i class="fas fa-eye" id="toggleIcon"></i>
                        </span>
                    </div>
                </div>
                
                <div class="mb-4">
                    <label class="form-label">套餐</label>
                    <select name="plan_id" class="form-select">
                        <c:forEach var="plan" items="${planList }">
                            <option value="${plan.id}" ${user.plan_id==plan.id ? 'selected' : ''}>
                                ${plan.plan_name} (¥${plan.monthly_fee})
                            </option>
                        </c:forEach>
                    </select>
                </div>
                
                <div class="mb-4">
                    <label class="form-label">预存话费</label>
                    <div class="input-group">
                        <span class="input-group-text">¥</span>
                        <input name="prepaid_amount" value="${user.prepaid_amount }" class="form-control">
                    </div>
                    <small class="text-muted">${yebz }</small>
                </div>
                
                <div class="row g-3 mb-4">
                    <div class="col-md-6">
                        <label class="form-label">状态</label>
                        <select name="status" class="form-select">
                            <option value="1" ${user.status=='1' ? 'selected' : ''}>正常</option>
                            <option value="0" ${user.status=='0' ? 'selected' : ''}>异常</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">权限</label>
                        <select name="role" class="form-select">
                            <option value="user" ${user.role=='user' ? 'selected' : ''}>普通用户</option>
                            <option value="admin" ${user.role=='admin' ? 'selected' : ''}>管理员</option>
                        </select>
                    </div>
                </div>
                
                <div class="d-flex justify-content-between mt-5">
                    <button type="button" class="btn btn-outline-secondary" onclick="history.go(-1)">
                        <i class="fas fa-arrow-left me-2"></i>返回
                    </button>
                    <button type="submit" class="btn btn-primary" onclick="return confirm('确认修改用户信息吗？')">
                        <i class="fas fa-save me-2"></i>保存修改
                    </button>
                </div>
            </form:form>
        </div>
    </div>
</div>

<script>
    function togglePassword() {
        const input = document.getElementById('passwordInput');
        const icon = document.getElementById('toggleIcon');
        if (input.type === 'password') {
            input.type = 'text';
            icon.classList.replace('fa-eye', 'fa-eye-slash');
        } else {
            input.type = 'password';
            icon.classList.replace('fa-eye-slash', 'fa-eye');
        }
    }
</script>
</body>
</html>